
<template>
<div id="home">

    <!-- 修改密码对话框 -->
    <ModifyPwd></ModifyPwd>

    <!-- 用户个人信息 -->
    <UserInfo></UserInfo>

    <transition name="homeLayoutSider">
        <div id="homeLayoutSider" v-if="show" :style="{height:homeSliderHeight+'px'}">

            <!-- logo -->
            <div id="homeLogoBox">
                <a><img src="../../static/images/zhongruanLogo.png" alt=""><span>度量平台</span></a>
            </div>

            <!-- photo -->
            <div id="homePhotoBox">
                <div id="homePhotoHeader">
                    <div>
                        <img src="../../static/images/header.jpg" alt="头像">
                    </div>
                    <div>
                        <p>欢迎您,</p>
                        <p>{{userName}}</p>
                    </div>
                </div>
                <div id="homePhotoState">权限:<span>超级管理员</span></div>
            </div>

            <!-- menu -->
            <Menu width="auto" active-name="1" :theme="menuTheme" accordion>
                <MenuItem name="1">
                <router-link to="/home/userlist">
                    <Icon type="home"></Icon>首页
                </router-link>
                </MenuItem>
                <Submenu name="2" class="subMenus">
                    <template slot="title">
                        <Icon type="ios-people"></Icon>PO&项目
                    </template>
                    <MenuItem name="2-1">
                    <Icon type="ios-people"></Icon>PO
                    </MenuItem>
                    <MenuItem name="2-2">
                    <Icon type="ios-people"></Icon>项目
                    </MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>部门
                    </template>
                    <MenuItem name="3-1">华为</MenuItem>
                    <MenuItem name="3-2">中软</MenuItem>
                    <MenuItem name="3-3">地域</MenuItem>
                </Submenu>
                <MenuItem name="4">
                <Icon type="home"></Icon>指标配置
                </MenuItem>
                <Submenu name="5">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>系统管理
                    </template>

                    <MenuItem name="5-1">
                    <router-link to="/home/userlist">
                        用户
                    </router-link>
                    </MenuItem>

                    <MenuItem name="5-2">角色</MenuItem>
                    <MenuItem name="5-3">参数</MenuItem>
                </Submenu>
            </Menu>
        </div>
    </transition>

    <div id="homeLayoutContent">
        <div id="homeHeader">
            <div>
                <Icon @click.native="collapsedSider" type="navicon-round" size="24"></Icon>
            </div>
            <div>
                <Dropdown trigger="click" id="homeUserInfo">
                    <a href="javascript:void(0)">
                        {{userName}}
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem @click.native="userInfoAct">个人信息</DropdownItem>
                        <DropdownItem @click.native="modifyPwdAct">修改密码</DropdownItem>
                        <DropdownItem @click.native="outLogin">退出</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
            <!-- 主题 -->
            <Theme></Theme>
        </div>
        <div id="homeContent">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</div>
</template>
<script>
//导入UI组件
import {
    Menu,
    Submenu,
    MenuGroup,
    MenuItem,
    Icon,
    Dropdown,
    DropdownMenu,
    DropdownItem
} from 'iview'

//导入mapActions
import {
    mapGetters,
    mapActions
} from 'vuex'
//导入主题切换模块
import Theme from '../components/Theme'
//导入修改密码组件
import ModifyPwd from '../components/ModifyPwd'
//导入用户个人信息组件
import UserInfo from '../components/UserInfo'

export default {
    data() {
        let name = sessionStorage.getItem('userInfo');
        return {
            homeSliderHeight: document.documentElement.clientHeight,
            show: true,
            menuTheme: 'dark',
            userName: name ? name : null
        }
    },
    created: () => {},
    mounted() {
        window.addEventListener('resize', () => {
            let bodyHeight = document.documentElement.clientHeight;
            let bodyWidth = document.documentElement.clientWidth;
            //设置slider高度
            if (bodyHeight > 400) {
                this.homeSliderHeight = document.documentElement.clientHeight;
            } else {
                this.homeSliderHeight = 400;
            }
            //通过宽度判定导航隐藏还是显示
            if (bodyWidth <= 1000) {
                this.show = false;
            } else {
                this.show = true;
            }
        });
    },
    computed: {
        computedTheme() {
            return this.$store.state.theme.checked;
        }
    },
    methods: {
        collapsedSider() {
            this.show = !this.show;
        },
        ...mapActions([
            'userInfoAct', //用户信息
            'modifyPwdAct' //修改密码
        ]),
        outLogin() {
            this.$store.commit('outLoginState', '0'); //登出
            sessionStorage.clear('userInfo')
            this.$router.replace('/login')

        }
    },
    components: {
        Menu,
        Submenu,
        MenuGroup,
        MenuItem,
        Icon,
        Dropdown,
        DropdownMenu,
        DropdownItem,
        Theme, //注册主题
        ModifyPwd, //注册修改密码组件
        UserInfo //注册用户个人信息组件
    }
}
</script>
<style scoped lang="less">
#home {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-align-content: stretch;
    align-content: stretch;
}

#homeLayoutSider {
    width: 230px;
    position: relative;
    background: #2A3F54;
}

#homeLayoutContent {
    flex: 1;
    position: relative;
}

#homeLogoBox {
    width: 230px;
}

#homeLogoBox a {
    display: block;
    height: 55px;
    color: #ECF0F1;
}

#homeLogoBox a:hover {
    color: #ECF0F1;
}

#homeLogoBox a::after {
    content: "";
    clear: both;
}

#homeLogoBox a img,
#homeLogoBox a span {
    float: left;
    display: block;
    line-height: 55px;
    font-size: 20px;
}

#homeLogoBox a img {
    height: 30px;
    margin: 10px 15px 15px 10px;
}

#homePhotoBox {
    height: 120px;
}

#homePhotoHeader {
    display: flex;
    height: 90px;
}

#homePhotoHeader > div {
    padding: 20px 10px 10px;
}

#homePhotoHeader > div > img {
    height: 55px;
    border: 5px solid #FFFFFF;
    border-radius: 100%;
}

#homePhotoHeader > div > p {
    padding-top: 5px;
    color: #BAB8B8;
}

#homePhotoHeader > div > p:last-child {
    padding-top: 5px;
    color: #ECF0F1;
    font-size: 13px;
}

#homePhotoState {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px #000;
}

#homeMenuBtn {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    padding: 14px 24px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover {
    background: #2A3F54 !important;
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu),
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
    border-right: 5px solid #1ABB9C;
    border-top: 1px solid #546371;
    border-bottom: 1px solid #1F2F3F;
    color: #fff;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item > a,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title > a {
    color: rgba(255, 255, 255, 0.7);
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) > a,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) > a {
    color: #fff;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
    background: #2a3f54 !important;
}

#homeHeader {
    height: 55px;
    line-height: 55px;
    padding: 0 20px;
    background: #EDEDED;
    border-bottom: 1px solid #D9DEE4;
}

#homeHeader {
    display: flex;
    justify-content: space-between;
}

#homeHeader > div > i {
    cursor: pointer;
}

.ivu-dropdown {
    padding: 0 10px;
}

.ivu-dropdown:hover {
    background: #D9DEE4;
}

.ivu-dropdown-rel > a {
    display: block;
    color: #515356;
}
#homeContent {
    padding: 20px;
}
</style>
